<template>
    <div class="box" id="scroll_in2" ref="ad">
        <van-nav-bar style="margin-top:44px" title="- 出入境证件领取方式及注意事项 -" />
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <div class="boxa">
                <h3>一、领取方式：</h3>
                <p>1.本人手机收到取证短信通知的，请到日照市政务服务大厅西门24小时自助区，使用“公安出入境取证机”自助设备自行领取证件。</p>
                <p>2.本人接到公安出入境工作人员电话通知的，请于工作时间到公安出入境窗口人工领取。</p>
                <h3>二、取件所需材料</h3>
                <p>1、首次申请：</p>
                <p>1.本人领取，请携带本人居民身份证和回执单;</p>
                <p>2.他人代理领取，携带代理人居民身份证和回执单。</p>
                <h3>三、保管时限</h3>
                <p>办理的证件最长保管期为6个月</p>
                <h3>四、24小时自助区取证位置查询</h3>
                <p>高德地图搜索:日照市政务服务大厅(正门)</p>
                <p>或点击网址:</p>
                <p>https: //surlamap.com/35we5N9d5ED</p>
            </div>
        </van-pull-refresh>
        <van-nav-bar style="margin-top:44px" title="- 领取地址 -" />
        <div id="map-container">
        </div>


        <van-cell is-link icon="location-o" title="日照市政务服务大厅" />
        <van-cell is-link icon="phone-o" title="06337997150" @click="call">
            <a href="" v-show="false" ref="tels"></a>
        </van-cell>
        <van-cell is-link icon="coupon-o" title="24小时" />

    </div>
</template>

<script>
    import AMapLoader from "@amap/amap-jsapi-loader"; // 按需引入依赖
    // import { on } from "events";
    window._AMapSecurityConfig = {
        securityJsCode: "5eb78774a5a49ee463cbe869ac27ac65", // 安全密钥
    };
    export default {
        data() {
            return {
                count: 0,
                isLoading: false,
                backgroundColor: 'white',
                music1: "",
                CategoryStore: "1",
                map: null,
                mouseTool: null,
                overlays: [],
                auto: null,
                placeSearch: null,

            };
        },
        mounted() {
            this.initMap()
        },
        methods: {
            onRefresh() {
                setTimeout(() => {
                    this.isLoading = false;
                    this.count++;
                }, 1000);
            },
            call() {
                this.$refs.tels.href = `tel://06337997150`
                this.$refs.tels.click()
            },
            // 初始化地图1
            initMap() {
                AMapLoader.load({
                        key: "88756b5c865be729aa02adbc0a1691ce", //key值是key值 和安全密钥不同
                        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                        plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType', 'AMap.Geolocation',
                            'AMap.MouseTool'
                        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                    })
                    .then((AMap) => {
                        // console.log(AMap)
                        // 初始化地图
                        this.map = new AMap.Map("map-container", {
                            viewMode: "2D", //  是否为3D地图模式
                            zoom: 18, // 初始化地图级别
                            center: [113.129972, 22.570318], //中心点坐标
                            // layers: [//使用多个图层
                            // new AMap.TileLayer.Satellite(),
                            // new AMap.TileLayer.RoadNet()
                            // ],
                            resizeEnable: true,
                        })
                        this.map.addControl(new AMap.Scale())
                        this.map.addControl(new AMap.ToolBar())
                        this.map.addControl(new AMap.HawkEye())
                        this.map.addControl(new AMap.MapType())
                        this.map.addControl(new AMap.Geolocation())
                        // this.mouseTool = new AMap.MouseTool(this.maps)
                        // this.mouseTool.on("draw", e => {
                        //   console.log('eeee-----',e)
                        //   this.drawObj = e.obj
                        //   var area = Math.round(AMap.GeometryUtil.ringArea(e.obj.getPath()))
                        //   var distance = Math.round(AMap.GeometryUtil.distanceOfLine(e.obj.getPath()))
                        //   this.$message.success("绘制完成")
                        //     console.log(e.obj.getPath().map(({ lng, lat }) => [lng, lat]))
                        // })
                    })
                    .catch((e) => {
                        console.log(e);
                    });
            },

            // 初始化地图2
            initMap() {
                AMapLoader.load({
                        "key": "88756b5c865be729aa02adbc0a1691ce", // 申请好的Web端开发者Key，首次调用 load 时必填
                        "version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                        "plugins": ["AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", "AMap.MouseTool",
                            "AMap.MapType", "AMap.HawkEye"
                        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                    })
                    .then((AMap) => {
                        this.map = new AMap.Map('map-container', {
                            viewMode: "2D", //  是否为3D地图模式
                            zoom: 19, // 初始化地图级别
                            center: [119.552761, 35.418992], //中心点坐标  日照政务服务大厅
                            resizeEnable: true
                        });
                        // 添加左下角的比例尺
                        this.map.addControl(new AMap.Scale());
                        let toolBar = new AMap.ToolBar({
                            position: {
                                bottom: '210px',
                                right: '35px'
                            }
                        });
                        let controlBar = new AMap.ControlBar({
                            position: {
                                bottom: '280px',
                                right: '10px',
                            },
                        });
                        // 鼠标点击获取经纬度
                        this.map.on('click', function (e) {
                            console.log('e---', e)
                            console.log('e.lnglat---', e.lnglat)
                            console.log("经度", e.lnglat.getLng())
                            console.log("纬度", e.lnglat.getLat())
                            console.log(e.address);

                        });
                        // 地图上绘制点位
                        this.mouseTool = new AMap.MouseTool(this.map);
                        // 监听draw事件可获取画好的覆盖物
                        this.mouseTool.on('draw', function (e) {
                            console.log('获取画好的覆盖物', e)
                            this.overlays.push(e.obj);
                        }.bind(this))
                        // this.map.addControl(toolBar); // 添加右下角的放大缩小
                        // this.map.addControl(controlBar); // 方向盘
                        // this.map.addControl(new AMap.MapType()); // 添加右上角的标准图和卫星图  和路况
                        // this.map.addControl(new AMap.HawkEye()); // 添加地图放大镜
                    }).catch(e => {
                        console.log(e);
                    });
            },
            // 具体画图代码
            draw(type) {
                switch (type) {
                    case 'marker': {
                        this.mouseTool.marker({
                            //同Marker的Option设置
                        });
                        break;
                    }
                    case 'polyline': {
                        this.mouseTool.polyline({
                            strokeColor: '#80d8ff'
                            //同Polyline的Option设置
                        });
                        break;
                    }
                    case 'polygon': {
                        this.mouseTool.polygon({
                            fillColor: '#00b0ff',
                            strokeColor: '#80d8ff'
                            //同Polygon的Option设置
                        });
                        break;
                    }
                    case 'rectangle': {
                        this.mouseTool.rectangle({
                            fillColor: '#00b0ff',
                            strokeColor: '#80d8ff'
                            //同Polygon的Option设置
                        });
                        break;
                    }
                    case 'circle': {
                        this.mouseTool.circle({
                            fillColor: '#00b0ff',
                            strokeColor: '#80d8ff'
                            //同Circle的Option设置
                        });
                        break;
                    }
                }

            }
        },

    };
</script>

<style scoped>
    #map-container {
        overflow: hidden;
        margin: 0 auto !important;
        width: 90%;
        height: 300px;
        margin: 0;
    }

    .rowqq {
        /* position: -webkit-sticky; */
        /* position: fixed; */
        position: absolute;
        width: 100%;
        z-index: 9999;
        background-color: aliceblue;
    }

    .buttql {
        width: 100%;
    }

    .box {
        height: 100vh;
        overflow: auto;
    }

    p {
        text-indent: 2em;
    }

    h3 {
        text-indent: 2em;
    }

    h1 {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
    }

    .sj {
        position: relative;
        left: 15%;
        margin: 10px;
        text-align: center;
    }

    .boxa {
        margin: 10px;
        margin-bottom: 15px;
        font-size: 18px;

    }

    .yd {
        margin-bottom: 15px;
    }
</style>